<template>
  <div>
    <el-dialog
      title="选择部门"
      :visible.sync="dialogVisible"
      width="800px"
      @close="handleClose"
    >
      <section class="container">
        <el-row :gutter="100">
          <el-col :span="12">
            <section class="left">
              <section class="title">所有部门</section>
              <el-input
                size="mini"
                style="margin-bottom: 0px"
                suffix-icon="el-icon-search"
                v-model="filterText"
              ></el-input>
              <el-tree
                @check-change="changeHandler"
                check-strictly
                :data="data"
                show-checkbox
                default-expand-all
                :filter-node-method="filterNode"
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
              >
              </el-tree>
            </section>
          </el-col>
          <el-col :span="12">
            <section class="right">
              <section class="title">已选部门</section>
              <el-checkbox-group v-model="selectData">
                <el-checkbox
                  class="checkbox"
                  v-for="item in selectData"
                  @change="hanlerSelect($event, item)"
                  :label="item"
                >
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
            </section></el-col
          >
        </el-row>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save"
          >确 定</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { treeData, getAuthor,save} from "@/api/tenant/tenant.js";
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {
    return {
      dialogVisible: false,
      filterText: "",
      all: [],
      data: [],
      defaultProps: {
        // 修改el-tree默认data数组参数
        label: "name",
        id: "id",
        parentId: "parentId",
        children: "children",
      },
      selectData: [],
      selectData1: [],
    };
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //选择修改
    hanlerSelect(e, item) {
      this.$nextTick(() => {
        let res = [];
        this.selectData.forEach((row, index) => {
          res.push(row.id);
        });
        // res.push(item.id);
        this.$refs.tree.setCheckedKeys(res);
        console.log(item.name);
        console.log(item);
      });
    },
    //左侧选中
    changeHandler(arg, arg2, arg3) {
      this.selectData = [];
      console.log(arg);
      console.log(arg2);
      console.log(arg3);
      let res = [];
      this.$nextTick(() => {
        res = this.$refs.tree
          .getCheckedKeys()
          .concat(this.$refs.tree.getHalfCheckedKeys());
        // console.log(this.data)
        console.log();
        this.selectData = this.$refs.tree.getCheckedNodes();
        //     for (let i = 0; i < res.length; i++) {
        //   console.log();
        //   this.selectData.push(this.data[i]);
        // }
      });

      // for (let i = 0; i < this.data.length; i++) {
      //   for (let j = 0; j < res.length; j++) {
      //     if (this.data[i].id == res[j]) {
      //       this.selectData.push(this.data[i]);
      //       console.log(this.data[i].id);
      //     }
      //   }
      // }
      // this.selectData=[]
      console.log(res);
    },
    init() {
      this.dialogVisible = true;
      this.getTreeData();
    },
    //账套授权
    save(){
      let ids=[]
      this.selectData.forEach(item=>{
        ids.push(item.id)

      })
      ids=ids.join(',')
      save({
          id: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.id,
          bookId: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.bookId,
          roleId: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.roleId,
          useId: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.useId,
          officeId: ids
      }).then(res=>{
            this.$message({
            message: '恭喜您编辑成功',
            type: 'success'
            });
            this.$emit('refreshDataList2',this.selectData)

      })

    },
    getTreeData($event) {
      treeData().then((res) => {
        if (res.data.code === 200) {
          this.data = res.data.treeData;
          this.getAuthor().then((res) => {
            console.log(111111);
            let ids = [];

            this.$nextTick(() => {
              console.log(ids);
              for (let i = 0; i < this.selectData.length; i++) {
                ids.push(this.selectData[i].id);
                this.$refs.tree.setCheckedKeys(ids);
              }
            });
          });
        }
      });
    },
    getAuthor () {
      let that = this;
      return new Promise(function (resolve, reject) {
        getAuthor({
          departmentId:
            that.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.departmentId,
        }).then((res) => {
          that.selectData1 = res.data.page.officeList;
          console.log(that.selectData1);
          that.selectData = res.data.page.officeList;
          resolve(res.data);
        });
      });
    },

    handleClose(done) {
      this.dialogVisible = false;
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     done();
      //   })
      //   .catch((_) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  .checkbox {
    display: block;
    margin-bottom: 5px;
  }
  .title {
    color: #000;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .left {
    width: 100%;
    height: 500px;
    border: 1px #aaaaaa solid;
    padding: 10px;
  }
  .right {
    padding: 10px;
    width: 100%;
    height: 500px;
    border: 1px #aaaaaa solid;
  }
}
::v-deep .el-input.el-input--suffix .el-input__icon {
    line-height: 29px !important;
}
::v-deep .el-dialog__wrapper .el-dialog .el-dialog__body {
  padding: 20px 20px 0;
  padding-bottom: 0px;
  padding-bottom: 0 !important;
  overflow-x: hidden;
}
</style>
